/*
* spa.chat.css
* Chat feature styles
*/

.spa-chat {
    position: absolute;
    bottom:0;
    right:0;
    width:25em;
    height:2em;
    background: #fff;
    border-radius:0.5em 0 0 0;
    border-style:solid;
    border-width:thin 0 0 thin;
    border-color:#888;
    box-shadow:0 0 0.75em 0 #888;
    z-index :1;
}

.spa-chat-head, .spa-chat-closer {
    position : absolute;
    top :0;
    height:2em;
    line-height:1.8em;
    border-bottom:thin solid #888;
    cursor : pointer;
    background:#888;
    color: white;
    font-family: arial , helvetica, sans-serif;
    font-weight:800;
    text-align:center;
}

.spa-chat-head {
    left:0;
    right:2em;
    border-radius: 0.3em 0 0 0;
}

.spa-chat-closer {
    right:0;
    width:2em;
}

.spa-chat-closer:hover {
    background:#800;
}

.spa-chat-head-toggle {
    position: absolute;
    top:0;
    left:0;
    width:2em;
    bottom:0;
    border-radius:0.3em 0 0 0;
}
.spa-chat-head-title {
    position: absolute;
    left :50%;
    width: 16em;
    margin-left:-8em;
}

.spa-chat-sizer {
    position :absolute;
    top:2em;
    left:0;
    right:0;
}
.spa-chat-msgs {
    position: absolute;
    top:1em;
    left:1em;
    right:1em;
    bottom:1em;
    padding:0.5em;
    border :thin solid #888;
    overflow-x:hidden;
    overflow-y:scroll;
}
.spa-chat-box {
    position :absolute;
    height:2em;
    left:1em;
    right:1em;
    bottom:1em;
    border:thin solid #888;
    background:#888;
}
.spa-chat-box input[type=text] {
    float :left;
    width:75%;
    height:100%;
    padding:0.5em;
    border:0;
    background:#ddd;
    color:#404040;
}
.spa-chat-box input[type=text]:focus {
    background : #fff;
}

.spa-chat-box div {
    float :left;
    width:25%;
    height:3em;
    line-height:1.9em;
    text-align:center;
    color:#fff;
    font-weight:800;
    cursor:pointer;
}

.spa-chat-box div:hover {
    background-color:#444;
    color:#ff0;
}
.spa-chat-head:hover .spa-chat-head-toggle {
    background : #aaa;
}
